<script setup lang="ts">
import { onMounted } from 'vue';
import { state } from './state';
import {
  Search2 as AppNutIconSearch2,
  HorizontalN as AppNutIconHorizontalN,
} from '@nutui/icons-vue-taro';
import { navigateTo, showLoading } from '@tarojs/taro';
import {
  WORK_ORDER_STATUS,
  WORK_ORDER_STATUS_COLOR,
  WORK_ORDER_STATUS_BG_COLOR,
} from '/@/common/constant';
import { formatTimestampStr } from '/@/utils/time';
import { QUERY_WORK_ORDER_LIST } from '/@/api/modules/order/work-order';
import IMG_ICON_COOPERATE from '/@/assets/image/icon/cooperate.png';
import IMG_ICON_SPEED from '/@/assets/image/icon/speed.png';

/**
 * @description 列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  QUERY_WORK_ORDER_LIST({
    comQuery: { page, pageSize },
    workOrderDto: {
      status: state.activeStatus,
    },
    codeOrCreateUserName: state.keyword,
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.workOrderDto || !res.workOrderDto.length) return;

      res.workOrderDto.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
});
/**
 * 查询的工单状态
 */
const QUERY_WORK_ORDER_STATUS = {
  task_assign: '待指派',
  task_receive: '待接单',
  task_process: '处理中',
  task_review: '待审核',
  task_complete: '已完成',
  task_suspend_review: '待审批',
  task_suspend: '挂起',
};
</script>

<template>
  <view class="work-order-manage-list app-page--1">
    <app-navbar title="工单管理" />
    <nut-searchbar
      v-model="state.keyword"
      placeholder="请输入工单号"
      @search="
        () => {
          state.activePage = 1;
          state.finished = false;
          state.list = [];
          onLoading();
        }
      "
      @clear="
        () => {
          state.activePage = 1;
          state.finished = false;
          state.list = [];
          onLoading();
        }
      "
    >
      <template v-slot:leftin>
        <app-nut-icon-search2 />
      </template>
      <template v-slot:rightout>
        <nut-popover
          v-model:visible="state.filterPopoverVisible"
          location="bottom-end"
          :list="[
            {
              key: 'task_assign,task_receive,task_process,task_review,task_complete,task_suspend_review,task_suspend',
              name: '全部',
            },
            ...Object.entries(QUERY_WORK_ORDER_STATUS).map((item) => {
              return { key: item[0], name: item[1] };
            }),
          ]"
          @choose="
            (item) => {
              state.activeStatus = item.key;
              state.activePage = 1;
              state.finished = false;
              state.list = [];
              onLoading();
            }
          "
        >
          <template #reference>
            <view class="work-order-manage-list__filter-wrapper">
              <app-nut-icon-horizontal-n class="work-order-manage-list__filter-icon" />
              <text>筛选</text>
            </view>
          </template>
        </nut-popover>
      </template>
    </nut-searchbar>
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="work-order-manage-list__wrapper">
        <view
          v-for="item in state.list"
          :key="item.id || ''"
          class="work-order-manage-item"
          @click="
            navigateTo({
              url: `/pages/work-order/detail/index?id=${item.id}`,
            })
          "
        >
          <view class="work-order-manage-item__header">
            <view class="work-order-manage-item__header--left">
              <text class="work-order-manage-item__code">{{ item.orderCode }}</text>
              <image
                v-if="item.hastenStatus === 2"
                class="work-order-manage-item__icon"
                :src="IMG_ICON_SPEED"
              />
              <image
                v-if="item.cooperateStatus === 1"
                class="work-order-manage-item__icon"
                :src="IMG_ICON_COOPERATE"
              />
            </view>
            <view class="work-order-manage-item__header--right">
              <text
                class="work-order-manage-item__status"
                :style="{
                  color: item.status ? WORK_ORDER_STATUS_COLOR[item.status] : '#999',
                  backgroundColor: item.status ? WORK_ORDER_STATUS_BG_COLOR[item.status] : '#999',
                }"
              >
                {{ item.status ? WORK_ORDER_STATUS[item.status] : '-' }}
              </text>
            </view>
          </view>
          <view class="work-order-manage-item__description">
            <view class="work-order-manage-item__description--left">
              <text class="nut-ellipsis">{{ item.description || '-' }}</text>
            </view>
          </view>
          <view>
            <nut-row>
              <nut-col span="12">
                <text>来源:&nbsp;&nbsp;</text>
                <text>{{ item.orderSourceName || '-' }}</text>
              </nut-col>
              <nut-col span="12">
                <text>创建人:&nbsp;&nbsp;</text>
                <text>{{ item.createUserName || '-' }}</text>
              </nut-col>
            </nut-row>
          </view>
          <view>
            <text>创建时间:&nbsp;&nbsp;</text>
            <text>
              {{ formatTimestampStr(item.releaseTime) }}
            </text>
          </view>
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
